import React from "react";
import {
    StyleSheet,
    View,
    Text,
    TextInput,
    Button
} from "react-native";
import BaseScreen from "./BasePage";
import { px2dp, wh } from "../utils/ScreenUtil";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import Column from "../view/Column";
import LoginViewModel from "../mvvm/viewmodel/LoginViewModel";
//import Button from "../view/Button";

export default class LoginPage extends BaseScreen {
    _title = "登录"
    loginViewModel = new LoginViewModel();

    constructor(props) {
        super(props);
        this.setTitle('密码登录');
    }

    renderView() {
        return (
                <Column style={styles.content}>
                    <View style={styles.inputItem}>
                        <Text>用户名：</Text>
                        <TextInput
                            style={styles.input}
                            placeholder="请输入用户名"
                            onChangeText={(text) => this.loginViewModel.setNameText(text)} />

                    </View>
                    <View style={styles.inputItem}>
                        <Text>密 码：</Text>
                        <TextInput
                            style={styles.input}
                            placeholder="请输入密码"
                            secureTextEntry={true}
                            onChangeText={(text) => this.loginViewModel.setPwdText(text)} />
                    </View>

                    <View style={{ marginTop: 20 }}>
                        <Button
                            style={styles.btnStyle}
                            title={'确定'}
                            onPress={this.login} />
                    </View>

                </Column>
        )
    }

    login = () => {
        this.loginViewModel.login()
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        marginLeft: 10,
        marginRight: 10
    },

    inputItem: {
        flexDirection: 'row',
        height: 40,
        alignItems: 'flex-end'
    },

    input: {
        borderBottomColor: '#aaaaaa',
        borderBottomWidth: 1,
        width: 200
    },

    btnStyle: {
        height: px2dp(88),
        margin: px2dp(30),
        borderRadius: px2dp(10)
    }

})